import React,{Component} from 'react';
import {setSelectedKey} from "../../actions";
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import ContainerItem from '../../components/ContainerItem/ContainerItem';
import TableItem from '../../components/TableItem/TableItem';

class AdminList extends Component{
    constructor(props){
        super(props);
        this.state={};
    }

    render() {
        const btnList=[
            {
                label:'新增',
                icon:'plus',
                type:'primary',
                handleOnClick:this.handleAdd
            }
        ];
        const FormItemList=[
            {
                type:"Select",
                label:"state",
                placeholder:"状态",
                width:"140px",
                options:[
                    {
                        value:'1',
                        label:"成功"
                    },
                    {
                        value:'2',
                        label:"失败"
                    }
                ]
            },
            {
                type:"Input",
                label:"username",
                placeholder:'用户名'
            },
            {
                type:"Button",
                label:"搜索",
                icon:""
            }
        ];
        const dataSource = [
            {
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号',
            },
            {
                key: '2',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
        ];

        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
            },
        ];
        const pagination={
            total:25,
            pageSize:10,
            current:1,
            showSizeChanger:true,
            showQuickJumper:true
        };
        const tableSetting={
            dataSource,
            columns,
            minWidth:"900px",
            pagination
        };
        return(
            <div>
                <ContainerItem title={'管理员列表'}>
                    <TableItem btnList={btnList} FormItemList={FormItemList} tableSetting={tableSetting} />
                </ContainerItem>
            </div>
        )
    }

    componentDidMount() {
        this.props.setSelectedKey('/index/adminList');
    }

    /**
     * 处理跳转新增管理员页面事件
     */
    handleAdd=(e)=>{
        console.log(e)
        this.props.history.push('/index/adminAdd');
    }
}

const mapStateToProps=(state)=>{
    return{
        selectedKey: state.setSelectedKey
    }
};
const mapDispatchToProps=(dispatch)=>{
    return{
        setSelectedKey:selectedKey=>{
            dispatch(setSelectedKey(selectedKey))
        }
    }
};
AdminList.propTypes={
    setSelectedKey:PropTypes.func.isRequired
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AdminList);
